<section class="remarksDiv" [ngStyle]="tagData.cssStyle | styleFilter">
  <div class="title" *ngIf="tagData.data.titlebar && tagData.data.titlebar.label">
    <div class="remarksTitle" [innerHTML]="tagData.data.titlebar.label"></div>
    <div class="remarksImg">
      <img class="img1" *ngIf="tagData.data.titlebar.remarkIcon.iconName" appDebounceClick (debounceClick)="presentModal('remarks')"
        src="{{tagData.data.titlebar.remarkIcon.iconName}}">
      <img class="img2" *ngIf="tagData.data?.titlebar?.moreLinkIcon&&tagData.data?.titlebar?.moreLinkIcon?.iconName"
        appDebounceClick (debounceClick)="showActionSheet()" src="{{tagData.data.titlebar.moreLinkIcon.iconName}}">
      <div class="remarks-button" *ngIf="tagData.data.titlebar.remarkIcon.button"
        appDebounceClick (debounceClick)="go(tagData.data.titlebar.remarkIcon.button)">
        <span class="remarks-button-span">{{tagData.data.titlebar.remarkIcon.button.label}}</span>
        <img class="remarks-button-img" src="assets\icon\details_icon_more_laijian@3x.png" />
      </div>
    </div>
  </div>
  <div class="remarksPeople" *ngFor="let item of tagData.data.data">
    <div class="peopleMessage" [ngStyle]="item?.peopleMessageBoxCssStyle|styleFilter">
      <img src="{{item.avatar}}" onerror="this.src='assets/img/headtrait.png'"  [ngStyle]="item?.avatarCssStyle|styleFilter">
      <div class="imgRight" [ngStyle]="item?.imgRightBoxCssStyle|styleFilter">
        <div class="imgRightBox" [ngStyle]="item.imgRightBoxCssStyle|styleFilter">
          <div [ngStyle]="item?.mainBoxCssStyle|styleFilter">
            <span class="peopleName" [ngStyle]="item?.peopleNameCssStyle|styleFilter">{{item.name}}</span>
            <span *ngIf="item.tag" [ngStyle]="item?.peopleTagCssStyle|styleFilter" class="peopleTag">{{item.tag}}</span>
            <span appDebounceClick (debounceClick)="go(item.detail)" [ngStyle]="item?.peopleMoreCssStyle|styleFilter" class="peopleMore" *ngIf="item.detail">{{item.detail.label}}<img
                class="ionicImg" src="assets/img/arrow_icon_more@3x.png"></span>
            <span class="peopleRecommandTime" *ngIf="item.time"
              [ngStyle]="item.timeCssStyle|styleFilter">{{item.time}}</span>
          </div>
          <span *ngIf="item.label" [ngStyle]="item.labelCssStyle|styleFilter">{{item.label}}</span>
        </div>
      </div>
    </div>
    <div class="remarksContent" [ngStyle]="item?.contentCssStyle|styleFilter">{{item.content}}</div>
    <div class="recommendTitle 1" *ngIf="item.thirdRowLeft" [ngStyle]="item?.thirdRowLeftBoxCssStyle|styleFilter">
      <span class="thirdTitle" *ngIf="item.thirdRowLeft.text"
        [ngStyle]="item.thirdRowLeft.cssStyle|styleFilter">{{item.thirdRowLeft.text}}</span>
    </div>
    <div class="recommendTitle 2" *ngIf="item.thirdRowLeft2"  [ngStyle]="item?.thirdRowLeft2BoxCssStyle|styleFilter">
      <span class="thirdTitle" *ngIf="item.thirdRowLeft2.text"
        [ngStyle]="item.thirdRowLeft2.cssStyle|styleFilter">{{item.thirdRowLeft2.text}}</span>
    </div>
    <div class="recommendTitle 3" *ngIf="item.title" [ngStyle]="item?.recommendTitle3BoxCssStyle|styleFilter">
      {{item.title}}<span class="secondTitle" *ngIf="item.secondTitle" [ngStyle]="item?.secondTitleCssStyle|styleFilter">{{item.secondTitle}}</span><span
        class="secondTitle" *ngIf="item.threeTitle" [ngStyle]="item?.threeTitleCssStyle|styleFilter">{{item.threeTitle}}</span>
    </div>
    <div class="recommendation" *ngIf="item.recommendation" [ngStyle]="item?.recommendationBoxCssStyle|styleFilter">
      <div class="recommendation-div"><img class="recommendation-img" [ngStyle]="item?.recommendationImgCssStyle|styleFilter"
          src="assets/icon/list_operation_icon_b@2x.png" /> </div>
      <div [ngStyle]="item?.recommendationCssStyle|styleFilter">{{item.recommendation}}</div>
    </div>
    <div class="remarksPeopleImgs" *ngIf="item.imageList && item.imageList.length > 0" [ngStyle]="item?.remarksPeopleImgsCssStyle|styleFilter">
      <div class="box" *ngFor="let images of item.imageList.slice(0,4);let index = index;">
        <img class="box-img" src="{{images}}" appDebounceClick (debounceClick)="openImage(index + 1, item.imageList)" />
        <span class="tip" *ngIf="item.imageList.length > 4 && index === 3">{{ item.imageList.length }}图
        </span>
      </div>
    </div>
    <div class="buttonBox" [ngStyle]="item?.buttonBoxCssStyle|styleFilter">
      <div class="leftBox" [ngStyle]="item?.leftBoxBoxCssStyle|styleFilter">
        <span *ngIf="item.fourthRowLeft"
          [ngStyle]="item.fourthRowLeft.cssStyle|styleFilter">{{item.fourthRowLeft.text}}</span>
      </div>
      <div class="buttons" [ngStyle]="item?.buttonsBoxCssStyle|styleFilter">
        <ng-container *ngFor="let btnItem of item.thirdRowRight">
          <span class="spanBtn" appDebounceClick (debounceClick)="go(btnItem)">{{btnItem.text}}</span>
        </ng-container>
      </div>
    </div>
  </div>
  <div class="noRemark" *ngIf="tagData.data.data.length < 1">
    <span>暂无备注</span>
  </div>
  <div class="button" *ngIf="tagData.data.moreLink && tagData.data.moreLink.label"
    [ngStyle]="tagData.data.moreLink?.link?.params?.moreLinkBtnCssStyle|styleFilter"
    appDebounceClick (debounceClick)="go(tagData.data.moreLink)">
    <p class="button-p">{{tagData.data.moreLink.label}}</p>
  </div>

  <!-- 向上滚动刷新 -->
  <ion-infinite-scroll *ngIf="tagData.data.submit && tagData.pageTotal &&  (pageNo < pageTotal) " threshold="5%"
    (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</section>

<div appDebounceClick (debounceClick)="hiddenRemarks()" *ngIf="openRemarks || openRemarksList" class="templete">
</div>